<%@include file="/WEB-INF/common/taglibs.jsp"%>
<script type="text/javascript"
	src="${ctx}/resources/js/datatable-query.js"></script>
<script src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
<script type="text/javascript"
	src="${supr}/js/supr-theme/jquery-ui-timepicker-addon.js"></script>
<script>
var selected = [];
<c:if test="${not empty entity.newsLetterGroups}">
 	<c:forEach items="${entity.newsLetterGroups}" var="record"> 
	selected.push(${record.id});
	</c:forEach>
</c:if>
function addSelected(id){
	if (!isSelected(id)){
		selected.push(id);
	}
}
function removeSelected(id){
	var remove = -1;
	$.each(selected, function(index, value){
		if (value == id){
			remove = index;
			return false;				
		}
	});
	if (remove>-1){
		selected.splice(remove, 1);
	}else{
// 		console.dir('not found');
	}
	
}


function isSelected (id){
	var sel = false;
	$.each(selected, function(index, value){
			if (value == id){
				sel = true;
				return false;				
			}
	});
 	return sel;
}

$(document).ready(function(){
 	
	CKEDITOR.replace('emailContent',{
     		 customConfig: '/ckeditor/cust-config.js'
		
	});
	CKEDITOR.on( 'instanceReady', function( evt ) {
		var editor = evt.editor;
		
		// Apply focus class name.
		editor.on( 'focus', function() {
			editor.container.addClass( 'cke_focused' );
		});
		editor.on( 'blur', function() {
			editor.container.removeClass( 'cke_focused' );
		});

		// Put startup focus on the first editor in tab order.
		if ( editor.tabIndex == 1 ){
			editor.focus();
		}
		CKFinder.setupCKEditor( editor, { basePath : '/ckfinder/', skin : 'v1' } ) ;
});
});	
 
</script>


<div class="row-fluid">
	<div class="span12">
		<div class="box gradient">
			<div class="title">
				<h4>
					<span>Select News Letter Group </span>
				</h4>
				<a href="#" class="minimize">Minimize</a>
			</div>
			<div class="content clearfix scrollable">
				<table class="ajaxTable display table table-bordered">
					<thead>
						<tr>
							<th><a id="select_all"><span
									class="icomoon-icon-checkmark-2"></span></a></th>
 							<th>Name</th>
 						</tr>
					</thead>
				</table>
			</div>
		</div>

		<form id="mass-email-form" method="post">
			<div class="box ">
				<div class="title">
					<h4 class="clearfix">
						<span class="icon16 icomoon-icon-search-2"></span> <span>Email
							content </span>
					</h4>
					<a href="#" class="minimize">Minimize</a>
				</div>

				<div class="content form-horizontal">
					<div class="form-row row-fluid">
						<div class="span4">
							<label class="form-label span6">Title</label> <input
								class="span6" type="text" name="title"
								value="${entity.title}" />
						</div>
						<div class="span4">
							<label class="form-label span6">Deliver time</label> <input
								class="span6 datetimepicker" type="text" name="deliverTime"
								value="${entity.deliverTime}" />
						</div>
						<div class="span4">
							<label class="form-label span6">Status:</label> <label
								class="form-label span6">${entity.status}</label>
						</div>
					</div>
					<div class="form-row row-fluid">
						<div class="span12">
							<div class="row-fluid">
								<textarea name="content" class="span12 elastic"
									id="emailContent" rows="8">${entity.content}</textarea>
							</div>
						</div>
					</div>

				</div>
			</div>


		</form>
		<c:if test="${not empty entity}">
			<script>
    	$(document).ready(function(){
    	var recordColumn = ['email','name','status','reason'];
   		 $('.resultTable').dataTable({
				"bLengthChange" : true,
				"aoColumnDefs" : [ {
					'bSortable' : false,
					'aTargets' : [3 ]
				} ],
				aLengthMenu : [ [ 50, 100, 300, 99999 ], [ 50, 100, 300, 'All' ] ],
				"sAjaxSource" : '${ctx}/admin/mass-email-record/${entity.id}/',
				"createQueryData" : function (aoData){
						return	johnny.initQueryData(aoData, recordColumn);
				},
				"createResult" : function (json, echo){
	  				var dataArray = new Array();
					for ( var i = 0; i < json.result.length; i++) {
						var subArray = new Array();
						subArray.push(json.result[i].email);
						subArray.push(json.result[i].name);
	 					subArray.push(json.result[i].status);
						subArray.push(json.result[i].reason);
						dataArray.push(subArray);
					}
					return {
						sEcho : echo,
						iTotalRecords : json.totalCount,
						iTotalDisplayRecords : json.totalCount,
						aaData : dataArray
					};
				}
			});		
    		
    		
    		
    		
    	});
    	
    	
    	</script>
			<div class="box ">
				<div class="title">
					<h4 class="clearfix">
						<span class="icon16 icomoon-icon-search-2"></span> <span>Mail
							result</span>
					</h4>
					<a href="#" class="minimize">Minimize</a>
				</div>

				<div class="content clearfix scrollable">
					<table class="resultTable display table table-bordered">
						<thead>
							<tr>
								<th>SurName</th>
								<th>Email</th>
								<th>Status</th>
								<th>Reason</th>

							</tr>
						</thead>
					</table>
				</div>
			</div>
		</c:if>


	</div>
</div>
<c:if test="${'DONE' ne entity.status }">

<form action="post">
	<a href="#" class="btn btn-info mass-create"> <span
		class="icon12 icomoon-icon-plus white"></span> Ok
	</a>
</form>

</c:if>


<script type="text/javascript">

var selected_check = false;
$("#select_all").click(function(){
	selected_check = !selected_check;
		$('.forselect').each(function(index){
		 	if (selected_check){
			addSelected($(this).val());
		 	}else{
	 		removeSelected($(this).val());	
		 	}
		});
 	});
	
	
 	$('.mass-create').click(function() {
		var items = selected;
		if (items && items.length <= 0) {
			johnny.warning("Please select at least one user for print");
			return false;
		}
		var form = $('#mass-email-form');
		$(items).each(function(index ,value){
			$('<input>').attr({
			    type: 'hidden',
			    name: 'ids',
			    value : value
			}).appendTo(form);
		});
		form.submit();
	
	});
	var oTime = "";
	var oTable;
	$(document).ready(function() {
		var columnHeader = [ '', 'name'];

		oTable = $('.ajaxTable').dataTable({
			"bLengthChange" : true,
			"aoColumnDefs" : [ {
				'bSortable' : false,
				'aTargets' : [ 0 ]
			} ],
			aLengthMenu : [ [ 50, 100, 300, 99999 ], [ 50, 100, 300, 'All' ] ],
			"sAjaxSource" : '${ctx}/admin/news-letter-group/',
			"createQueryData" : function (aoData){
					return	johnny.initQueryData(aoData, columnHeader);
			},
			"onDataLoad"   : function (){
				$('.forselect').change(function (){
					var checked = $(this).attr('checked');
					var id = $(this).val();
					if (checked){
						addSelected(id);
					}else{
						removeSelected(id);
					}
  				});
				
				
			},
			"createResult" : function (json, echo){
			 
  				var dataArray = new Array();
				for ( var i = 0; i < json.result.length; i++) {
				
					var subArray = new Array();
					var sel = isSelected(json.result[i].id); 
					var value = johnny.getForSelect(json.result[i].id,sel);
					subArray.push(value);
					subArray.push(json.result[i].name);
 					dataArray.push(subArray);
				}
				return {
					sEcho : echo,
					iTotalRecords : json.totalCount,
					iTotalDisplayRecords : json.totalCount,
					aaData : dataArray
				};
			}
		});

		$(".filterdata").keyup(function() {
			updateGrid();
		});
		$(".filterdata").change(function() {
			updateGrid();
		});
 	});
	function updateGrid() {
		window.clearTimeout(oTime);
		oTime = setTimeout(function() {
			oTable.fnDraw();
		}, 500);
	}
</script>
